<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:80px' }"
    :wrapper-col="{ style: 'calc(100% - 80px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <!-- <a-form-item :label="String(passData.pid) === '0' ? '公司名称' : '部门名称'" name="name" :rules="[{ required: true, message: '请填写部门名称!' }]">
      <a-input v-model:value="formState.name" :maxlength="20" placeholder="请输入" />
    </a-form-item> -->
    <a-form-item label="部门名称" name="name" :rules="[{ required: true, message: '请填写部门名称!' }]">
      <a-input v-model:value="formState.name" :maxlength="20" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="数据权限" name="dataScope" :rules="[{ required: true, message: '请选择数据权限!' }]">
      <a-select v-model:value="formState.dataScope" placeholder="请输入">
        <a-select-option v-for="(item, index) in dataDict['DATA_PERMISSION']" :key="index" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number; // 1新建下级部门 、2新建同级部门、3修改部门名称
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { dataDict } = CommonHook();
const { visible, type, passData } = toRefs(props);
const { formDataRef, formState } = InitHook();
const { onFinish, onFinishFailed, resetHandle, resetFields } = OperationHook({ formDataRef, formState, emit, type, passData });
const init = () => {
  if (type.value === 3) {
    Object.assign(formState, passData.value);
  }
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      console.log(passData.value);
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped></style>
